<style scoped>
    a{
        color:#515a6e
    }
    .layout {
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
        height: 100%;
    }

    .layout-logo {
        height: 64px;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 0;
        left: 0;
        z-index: 999;
        color: #fff;
        font-size: 20px;
    }

    .layout-nav {
        /* width: 440px; */
        float: right;
        margin: 0 auto;
        margin-right: 20px;
    }
    .layout-nav>li>a{
        color: #fff;
    }

    .ivu-layout {
        height: 100%;
    }

    .content-layout {
        height: 100%;
    }

</style>
<template>
    <div class="layout">
        <Layout>
            <Header>
                <div class="layout-logo">
                    TTMOXIAOMO
                </div>
                <Menu mode="horizontal" theme="dark" active-name="1">

                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Icon type="ios-navigate"></Icon>
                            <router-link to="/">后台首页</router-link>
                        </MenuItem>
                        <MenuItem name="2">
                            <Icon type="ios-people" />
                            <Dropdown>
                                <a href="javascript:void(0)" :style="{color:'#fff'}">
                                    用户管理
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem>
                                        <router-link to="/admin">管理员</router-link>
                                    </DropdownItem>
                                    <DropdownItem> <router-link to="/resource">资源列表</router-link></DropdownItem>
                                    <DropdownItem><router-link to="/group">分组设置</router-link></DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </MenuItem>
                        <MenuItem name="3">
                            <Icon type="ios-keypad"></Icon>
                            <Dropdown>
                                <a href="javascript:void(0)" :style="{color:'#fff'}">
                                    后台设置
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem disabled>
                                        等待完善
                                    </DropdownItem>

                                    <!--   <DropdownItem disabled>豆汁儿</DropdownItem>
                                             <DropdownItem>冰糖葫芦</DropdownItem> -->

                                </DropdownMenu>
                            </Dropdown>
                        </MenuItem>
                        <MenuItem name="4">
                            <Dropdown>
                                <a href="javascript:void(0)" :style="{color:'#fff'}">
                                    {{adminName}}
                                    <Icon type="ios-arrow-down"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <!--<DropdownItem>个人信息</DropdownItem>-->
                                    <!--<DropdownItem>修改密码</DropdownItem>-->
                                    <DropdownItem divided ><a href="javascript:;" @click="logOut()">登出</a></DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </MenuItem>

                    </div>
                </Menu>
            </Header>
            <Layout class='content-layout'>
                <Sider hide-trigger :style="{background: '#fff'}">
                    <Menu active-name="3-3" theme="light" width="auto" :open-names="['3']">
                        <Submenu name="3">
                            <template slot="title">
                                <Icon type="ios-analytics"></Icon>
                                网站设置
                            </template>
                            <!--<MenuItem name="3-1">首页轮播</MenuItem>-->
                            <!--<MenuItem name="3-2">seo优化</MenuItem>-->
                            <MenuItem name="3-3">
                                <router-link to="/cate">导航</router-link>
                            </MenuItem>
                        </Submenu>
                        <Submenu name="1">
                            <template slot="title">
                                <Icon type="ios-keypad"></Icon>
                                内容设置
                            </template>
                            <MenuItem name="1-1">
                                <router-link to="/article">文章</router-link>
                            </MenuItem>
                            <!--<MenuItem name="1-2">照片</MenuItem>-->
                        </Submenu>

                    </Menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <Breadcrumb :style="{margin: '24px 0',textAlign:'left'}">
                        <BreadcrumbItem><router-link to="/admin">{{ routeName }}</router-link></BreadcrumbItem>
                        <!--<BreadcrumbItem>Components</BreadcrumbItem>-->
                        <!--<BreadcrumbItem>Layout</BreadcrumbItem>-->
                    </Breadcrumb>
                    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                        <router-view></router-view>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>

    // import AdminComponent from './AdminComponent';
    export default {
        name: "Home",
        data(){
            return{
                routeName:this.$router.history.current.name,
                adminName:this.$store.state.userInfo,

            }
        },
        // component:{
        //     AdminComponent
        // },
        mounted() {
            console.log(this.$store.state.userInfo);
        },
        methods:{
            logOut(){
                this.$store.commit('login',"");
                this.$router.push('/login');
            }
        }

    }
</script>


